<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>选择器</title>
		<style>
			#header{
				width:100%;
				height:50px;
				/*边框，背景颜色：查选择器是否选中，效果是否正确*/
				border:1px solid black;
				background-color: #a1a1a1;
			}
			#body{
				width:100%;
				height:900px;
				background-color: aqua;
			}
			#footer{
				width:100%;
				height:200px;
				background-color: blueviolet;
			}
		</style>
	</head>
	<body>
		<!--①元素选择器:以元素名作为选择器，抓取元素
          ②伪类选择器原选择器 上附加效果 ：hover 鼠标悬停
                                      ：before在前添加文本，一般与content属性
									  ：after 在后添加文本，一般与content羼性
         ③类选择器:以个或多个别名作为选择器，抓取元素【页面微调】
         ④通用选择器:抓取页面上所有元素，规范页面元素【盒模型、字体】
		 ⑤id选择器：用在页面结构搭建 【唯一性，切片】
		    语法：html 前标记 id="header" 别名
			     css  #header 别名
			id选择器与class选择器区别
			搭建页面结构，根据结构中小范围微调	 
		-->
		<div id="header"></div>
		<!-- 作业：网页主体 900px 网页尾巴200px 颜色-->
		<div id="body"></div>
		<div id="footer"></div>
	</body>
</html>